import { View, ViewProps } from "@tarojs/components";
import "./index.less";

// 类型定义
type NavItem = {
  value: string | number;
  label: string;
  sub?: number;
  icon?: string; // 图标路径
};

type NavProps = {
  options: NavItem[]; // 导航选项
  value: string | number; // 当前选中值
  onChange?: (value: string | number) => void; // 选中变化回调
  disabled?: boolean;
} & ViewProps;

const SideNav: React.FC<NavProps> = ({
  options,
  value,
  onChange,
  disabled,
  ...others
}) => {
  const handleClick = (item: NavItem) => {
    if (item.value !== value && !disabled) {
      onChange?.(item.value);
    }
  };

  return (
    <View
      className={`sidenav-container ${disabled ? "disabled" : ""}`}
      {...others}
    >
      {options.map((item) => (
        <View
          key={item.value}
          className={`sidenav-item ${item.value === value ? "active" : ""}`}
          onClick={() => handleClick(item)}
        >
          <View className="sidenav-label">{item.label}</View>
          {item.sub && <View className="sidenav-item-sub">{item.sub}</View>}
        </View>
      ))}
    </View>
  );
};

export default SideNav;
